<template>
  <div class="detail">
    <van-nav-bar
      title="商品详情"
      left-text="返回"
      right-text="首页"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
    />
    <h1>{{ product.name }}</h1>
    <div class="div" v-html="product.content"></div>
    <van-goods-action>
      <van-goods-action-icon
        icon="chat-o"
        text="客服"
        color="rgb(189, 153, 220)"
        @click="onClickCustomer"
        dot
      />
      <van-goods-action-icon
        icon="cart-o"
        text="购物车"
        color="rgb(189, 153, 220)"
        badge="5"
        @click="onClickCart"
      />
      <van-goods-action-icon
        icon="shop-o"
        text="店铺"
        color="rgb(189, 153, 220)"
        badge="1"
        @click="onClickShop"
      />
      <van-goods-action-button
        color="#be99ff"
        type="warning"
        @click="onClickButton_addCart"
        text="加入购物车"
      />
      <van-goods-action-button
        color="#7232dd"
        type="danger"
        text="立即购买"
        @click="onClickButton_addCart"
      />
    </van-goods-action>
  </div>
</template>

<script>
import { addToCartAPI } from '@/services/carts';

import { loadDataByIdAPI } from '@/services/products';
import { Toast } from 'vant';
export default {
  data() {
    return {
      product: {},
    };
  },
  async created() {
    const res = await loadDataByIdAPI(this.$route.query.id);
    this.product = res.data;
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    onClickRight() {
      this.$router.push({
        name: 'Home',
      });
    },
    onClickShop() {
      this.$router.push({
        name: 'Shop',
      });
    },
    onClickIcon() {
      this.$router.push({
        name: 'List',
      });
    },
    onClickCustomer() {
      this.$router.push({
        name: 'Customers',
      });
    },
    onClickCart() {
      this.$router.push({
        name: 'Cart',
      });
    },
    async onClickButton_addCart() {
      this.product.amount += 1;
      await addToCartAPI({
        product: this.product.id,
        amount: 1,
        price: this.product.price,
      });
      Toast.success('加入购物车成功');
    },
  },
};
</script>

<style scoped>
h1 {
  text-align: center;
  background: rgb(189, 153, 220);
  margin: 0;
  padding: 15px;
}
</style>
